<template>
  <div>
    <el-drawer :visible.sync="dialogVisible" direction="rtl" size="60%">
      <h3 slot="title">查看退款申请详细信息</h3>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>退款基本信息</span>
        </div>
        <el-form ref="form" :model="form"  label-suffix='：' inline label-position="left">
          <el-form-item label="服务单号">
            <span class="look-item">{{form.id}}</span>
          </el-form-item>
          <el-form-item label="已购商品编号">
            <span class="look-item">{{form.order_detail_id}}</span>
          </el-form-item>
          <el-form-item label="申请时间">
            <span class="look-item">{{form.createdate}}</span>
          </el-form-item>
          <el-form-item label="申请状态">
            <span class="look-item">{{refundState[form.state]}}</span>
          </el-form-item>
          <el-form-item label="用户账号">
            <span class="look-item">{{form.openid}}</span>
          </el-form-item>
          <el-form-item label="退款金额">
            <span class="look-item">{{form.total_price}}</span>
          </el-form-item>
          <el-form-item label="退款原因">
            <span class="look-item">{{form.reason}}</span>
          </el-form-item>
          <el-form-item label="处理备注">
            <span class="look-item">{{form.no_pass_reason||'暂未处理'}}</span>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>退款商品的订单信息</span>
        </div>
        <el-table :data="orderData" border>
          <el-table-column prop="id" label="订单id" />
          <el-table-column prop="money" label="订单金额" />
          <el-table-column prop="desc" label="订单留言" />
          <el-table-column prop="user_name" label="收货人" />
          <el-table-column prop="phone" label="手机号码" />
          <el-table-column prop="area" label="收货地址" />
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>退款商品</span>
        </div>
        <el-table :data="goods" border>
          <el-table-column prop="cname" label="商品分类" />
          <el-table-column prop="name" label="商品名称" />
          <el-table-column label="规格名称">
           <template slot-scope="scope">
              {{scope.row.ggobj.name}}
            </template>
           </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              {{scope.row.ggobj.price}}
            </template>
           </el-table-column>
          <el-table-column label="缩略图">
            <template slot-scope="scope">
              <el-image style="width: 80px" :src="$http.staticURL + scope.row.ggobj.img" :preview-src-list="[$http.staticURL + scope.row.ggobj.img]" fit="scale-down"/>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        phone: '13035121118',
        gender: 1,
        newPsw: '123456',
        psw: '123456',
        state: 0
      },
      goods:[],
      orderData: [],
    }
  },
  computed: {
    ...mapState(['refundState']),
  },
  methods: {
    init(val) {
      this.dialogVisible = true
      this.getrefundGoods(val.order_detail_id)
      this.form = val
      console.log(val,555);
      
    },
    getrefundGoods(id){
      this.$http.httpPost('/order/productsList', {id:id}).then(res=>{
        let da = res.data.data[0].products
        
        let gglist = JSON.parse(da[0].specification)
        console.log(gglist,1);
        
        let ggarr = gglist.filter(e=>e.id == da[0].specification_id)
        da[0].ggobj = ggarr[0]
        console.log(da,2);
        
        this.goods = da
        let oid = da[0].order_id
        console.log(this.goods,'tuikuanxiangq');
        this.getrefundOrder(oid)
      })
      
    },
    async getrefundOrder(id){
      await this.$http.httpPost('/order/orderList', {id:id}).then(res=>{
        console.log(res,789);
        if (res.data.code == 0) {
          // this.total = res.data.data.total
          this.orderData = res.data.data.data
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
  .look-item{
    margin-right: 20px;
  }
</style>
